<template>
  <h1>轮播图列表</h1>
  <el-button  @click="deteledAll" type="danger" class="obtn">删除所有</el-button>
  
  
    <el-table :data="banners" style="width: 100%">
      <el-table-column prop="bannerid" label="轮播图编号"  />
      <el-table-column label="图片" >
        <template #default="scope">
          <img class="img" :src="scope.row.img" />
        </template>
      </el-table-column>
      <el-table-column prop="alt" label="图片提示" />
      <el-table-column prop="link" label="图片链接"/>
      <el-table-column label="是否启用"   v-if="crud.charAt(2)==='1'">
        <template #default="scope">
          <el-switch
            v-model="scope.row.flag"
            @change="(val:boolean)=>update(scope.row.bannerid,val)"
          />
        </template>
      </el-table-column>
      <el-table-column label="删除"  v-if="crud.charAt(3)==='1'">
      <template #default="scope">
        <el-popconfirm
          title="亲，您真的要删除吗?"
          @confirm="deletedData(scope.row.bannerid)"
        >
          <template #reference>
            <el-button type="danger" :icon="Delete" circle />
          </template>
        </el-popconfirm>
      </template>
    </el-table-column>
  </el-table>

</template>

<script setup lang="ts">
//列表信息

import { reactive } from "vue";

import service from "../../../utlis/service";
import {useRoute} from "vue-router";
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  Check,
  Delete,
  Edit,
  Message,
  Search,
  Star,
} from '@element-plus/icons-vue'

const $route = useRoute();
const crud:string = ($route.meta.crud as string);



interface banner {
  link: string;
  img: string;
  alt: string;
  bannerid: string;
  flag: boolean;
}
let banners = reactive<banner[]>([]);
const bannerCheack = () => {
  service({
    url: "/banner/list",
  }).then((res: any) => {
   

    if (res.data.code === "200") {
      banners.push(...res.data.data);
     
      
    }
  });
};
bannerCheack();
//状态更新
const update = (bannerid: string, val: boolean) => {
  service({
    url: "/banner/updateFlag",
    method: "post",
    data: {
      bannerid: bannerid,
      flag: val,
    },
  }).then((res) => {
    if (res.data.code === "200") {
      ElMessage({
    message: 'Congrats, this is a success message.',
    type: 'success',
  })
      
    }
  });
};
//删除数据
const deletedData = (bannerid: string) => {
  service({
    url: "/banner/delete",
    method: "get",
    params: {
      bannerid: bannerid,
    },
  }).then((res) => {
    if (res.data.code === "200") {
      location.reload();
      ElMessage({
    message: '删除成功',
    type: 'success',
  })

      
    
    }
  });
};
//删除全部
const deteledAll = () => {
  service({
    url:"banner/removeAll"
  }).then((res) => {
    if (res.data.code === "200") {
      ElMessage({
        message: "删除成功",
        type: "success",
      });
      bannerCheack();
    }
  });
  
};
deteledAll()
</script>

<style scoped>
.img {
  width: 200px;
}
.obtn{
 float: right;
 margin: 10px 0;
}

.el-table{
  border: 1px solid gainsboro;
  margin-top: 0;
}
.el-table .cell{
  padding: 0 59px;


}

</style>